<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <select name="" id="">
      <option value="0">请选择销量范围</option>
      <option value="1">&lt100</option>
      <option value="2">100~500</option>
      <option value="3">&gt500</option>
    </select>
    <ul>
      <li>牛客logo马克杯</li>
      <li>无盖星空杯</li>
      <li>老式茶杯</li>
      <li>欧式印花杯</li>
    </ul>

    <script>
      var cups = [
        { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
        { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
        { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
        { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' },
      ]
      var select = document.querySelector('select')
      var ul = document.querySelector('ul')
      // 补全代码
      select.onchange = (e) => {
        console.log(e.target.value)
        if (e.target.value == 1) {
          const p1 = cups.filter((item) => item.sales < 100)
          console.log(p1)
          ul.innerHTML = ''
          for (let i = 0; i < p1.length; i++) {
            var li = document.createElement('li')
            li.innerHTML = p1[i].name
            ul.appendChild(li)
          }
        } else if (e.target.value == 2) {
          const p2 = cups.filter((item) => item.sales < 500 && item.sales > 100)
          console.log(p2)
          ul.innerHTML = ''
          for (let i = 0; i < p2.length; i++) {
            var li = document.createElement('li')
            li.innerHTML = p2[i].name
            ul.appendChild(li)
          }
        } else if (e.target.value == 3) {
          const p3 = cups.filter((item) => item.sales > 500)
          console.log(p3)
          ul.innerHTML = ''
          for (let i = 0; i < p3.length; i++) {
            var li = document.createElement('li')
            li.innerHTML = p3[i].name
            ul.appendChild(li)
          }
        }
      }
    </script>
  </body>
</html>
